<template>
  <el-table
    :data="spaces"
    class="custom-table"
    :show-header="false"
    @row-click="rowClick"
    v-loading="loading"
  >
    <el-table-column label="空间名">
      <div slot-scope="{ row }" class="flex align-items-center">
        <router-link :to="`/spaces/${row.id}`" class="m-r-10 shrink-0">
          <el-avatar :src="row.avatar" :size="40" />
        </router-link>
        <div class="flex-1" style="min-width: 0;">
          <div>
            <router-link :to="`/spaces/${row.id}`" class="title link" v-text="row.title" />
            -
            <router-link
              :to="`/users/${row.owner.id}`"
              class="info-deep link"
              v-text="row.owner.nickname"
            />
          </div>
          <p class="line1" :title="row.desc">{{ row.desc }}</p>
        </div>
      </div>
    </el-table-column>
    <el-table-column label="其它" width="140" align="right">
      <template slot-scope="{ row }">
        <space-icons :space="row" />
        <timeago2 :date-time="row.updated_at" pre-text="更新于" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import SpaceIcons from '@/components/spaces/SpacesListIcons';

export default {
  name: 'spaces-list',
  components: { SpaceIcons },
  props: {
    spaces: {
      type: Array,
      required: true,
    },
    loading: Boolean,
  },
  methods: {
    rowClick(row) { this.$root.$emit('routerPush', { path: `/spaces/${row.id}` }); },
  },
};
</script>

<style></style>
